<template>
	<view>
		<view class="header" @click="fBack">
			<u-icon name="arrow-left" /> 返回
		</view>
		<view class="uni-flexId uni-row">
			<view class="flex-itemId" style="width: 20%;">
				<image src="../../static/image/logo.png"></image>
			</view>
			<view class="flex-itemId ">
				<p class="text-Id">类型：<span>基础</span></p>
				<p class="text-Id">周期：<span>一年</span></p>
			</view>
			<!-- <view class="flex-itemId ">
				<p class="text-Id">资费：<span>0.84</span>元</p>
				<p class="text-Id">应付：<span>0.84</span>元</p>
			</view> -->
		</view>
		<view class="flex-iconBox">
			<p style="margin-bottom: 10rpx;">名称：<span>{{ oCurrent.name }}</span></p>
			<p>说明：<span>已到期/即将到期时充值，可延长服务周期</span></p>
		</view>
		<view class="flex-rateBtn">
			<span>到期续费</span>
		</view>
		<view class="flex-mobileBox">
			<view class="mobileDate" v-for="item in aShowType" :key="item.key" :class="{'active': item.key === nKey}"
				@click="fChangeType(item.key)">{{ item.name }}（{{ item.price }} / 1年）</view>
		</view>
		<view class="flex-mobileTotal">
			套餐续费数：
			<u-number-box v-model="total" min="1" max="3" disabled-input></u-number-box>年
		</view>
		<u-button type="primary" :disabled="bDisabled" @click="fOpen">确认</u-button>
		<u-modal v-model="show" title="确认续费" show-cancel-button @confirm="fSubmit">
			<view style="text-align: center; padding: 20rpx;">
				<view>卡号：{{ oData.imsi }}</view>
				<view style="margin: 10rpx 0;">{{ sName }}</view>
				<view>续费{{total}}年，共计{{total * nPrice}}元</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		oApiList
	} from '@/common/info.js';
	export default {
		data() {
			const aType = [{
					key: 0,
					name: 'SIM卡-30M/月移动卡',
					price: 10,
					value: '30mb'
				},
				{
					key: 1,
					name: 'SIM卡-100M/月移动卡',
					price: 20,
					value: '100mb'
				},
				{
					key: 2,
					name: 'SIM卡-1G/月移动卡',
					price: 100,
					value: '1gb'
				},
				{
					key: 3,
					name: 'SIM卡-2G/月移动卡',
					price: 120,
					value: '2gb'
				}
			]
			return {
				total: 1,
				show: false,
				oData: {},
				nKey: 0,
				aType,
				aNewType: aType,
				aShowType: []
			}
		},
		computed: {
			oCurrent() {
				const arr = this.oData.current_products
				return arr && arr[0] || {
					package_capacity: '',
					capacity_unit: '',
					service_cycle: '',
					service_cycle_unit: '',
					current_cycle_usage: '',
					effective_time: '',
					expiration_time: '',
					current_cycle_begin_time: '',
					current_cycle_end_time: '',
					current_cycle_voice_usage: '',
					voice_capacity: '',
				}
			},

			nPrice() {
				return this.aNewType[this.nKey].price
			},
			sName() {
				return this.aNewType[this.nKey].name
			},
			bDisabled() {
				return this.aShowType.length <= 0
			}
		},
		methods: {
			fInit(data) {
				this.oData = data
				const oType = oApiList[data.agent_id].aType || {}
				this.aNewType = this.aType.map(item => {
					const price = oType[item.key] || item.price
					return {
						...item,
						price
					}
				})

				const value = this.oCurrent.package_capacity + this.oCurrent.capacity_unit
				for (var i = 0; i < this.aNewType.length; i++) {
					if (this.aNewType[i].value === value) {
						this.nKey = this.aNewType[i].key
						this.aShowType = [this.aNewType[i]]
						return
					}
				}
				this.aShowType = this.aNewType
			},
			fBack() {
				this.$emit('back')
			},
			fOpen() {
				this.show = true
			},
			fChangeType(key) {
				this.nKey = key
				this.total = 1
			},
			fSubmit() {
				const _that = this
				const total = _that.total * 100 * this.nPrice
				this.$u.api.wxPay(total,
					`卡号：${ _that.oData.imsi },套餐：${ _that.sName },确认续费${ _that.total }年，共计${ _that.total * _that.nPrice }元`
				).then(
					oPay => {
						wx.requestPayment({
							...oPay.data,
							success(res) {
								_that.$u.api.simCardRenew(_that.oData.iccid, _that.total * 12, _that.oData
									.agent_id).then(res => {
									const arr = res.result
									const oMsg = {
										type: 'error'
									}
									if (arr && arr.length >= 1) {
										const obj = arr[0]
										if (obj.code == 0) {
											oMsg.title = '续费成功'
											oMsg.type = 'success'
											oMsg.callback = () => {
												_that.$emit('back', true)
											}
										} else {
											oMsg.title = obj.message
										}
									} else {
										oMsg.title = '续费失败'
									}
									const oQuery = {
										'out_trade_no': oPay['out_trade_no'],
										'reason': oMsg.title,
										'amount': {
											'refund': total,
											total,
											'currency': 'CNY'
										}
									}
									console.log(oQuery)
									_that.$refs.uToast.show(oMsg)
								})
							},
							fail({
								errMsg
							}) {
								const msg = errMsg.replace('requestPayment:fail ', '')
								const oMsg = {
									type: 'error'
								}
								if (msg === 'cancel') {
									oMsg.title = '取消支付'
									console.log('取消支付')
								} else {
									oMsg.title = '支付失败: ' + msg
									console.log('支付失败', msg)
								}
								_that.$refs.uToast.show(oMsg)
							}
						})
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		font-size: 12px;
	}

	.uni-flexId {
		display: flex;
		padding: 20rpx 0;
		background: #fff;
		justify-content: space-around;

	}

	.flex-itemId {
		height: 100rpx;
	}

	.flex-itemId image {
		width: 100%;
		height: 100%;

		.text-Id {
			margin-top: 8rpx;
			margin-bottom: 12rpx;
		}
	}

	.flex-iconBox {
		background: #fff;
		height: 150rpx;
		padding: 20rpx 0 20rpx 20rpx;
		color: #bbb;

		p span {
			color: #000
		}
	}

	.flex-rateBtn {
		height: 80rpx;
		text-align: center;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		background: #fff;
		line-height: 80rpx;

		span {
			display: inline-block;
			width: 150rpx;
			height: 78rpx;
			color: #2B85E4;
			border-bottom: 1px solid #007AFF;
		}
	}

	.flex-mobileBox {
		/* height: 160rpx; */
		border-top: 1px solid transparent;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.mobileDate {
			width: 300rpx;
			/* height: 90rpx; */
			padding: 10rpx 20rpx;
			border: 1px solid #eee;
			margin: 20rpx;
			/* line-height: 90rpx; */
			text-align: center;
			font-size: 12px;

			/* float: left; */
			&.active {
				border-color: #007AFF;
			}
		}
	}

	.flex-mobileTotal {
		height: 100rpx;
		background: #fff;
		line-height: 100rpx;
		padding-left: 30rpx;

		p {
			display: flex;
			justify-content: flex-start;

			.btn {
				font-size: 40rpx;
			}
		}
	}
</style>
